<template>
  <div>
    <form>
      <el-card>
        <!--上方搜索栏-->
        <div class="demo-input-size">
          <el-select slot="prepend" placeholder="场地类型" v-model="queryInfo.name">
            <el-option :label="item" :value="item" v-for="(item,index) in init.name" :key='index'></el-option>
          </el-select>
          <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <el-select slot="prepend" placeholder="时间" v-model="queryInfo.time">
            <el-option :label="item" :value="item" v-for="(item,index) in init.time" :key='index'></el-option>
          </el-select>
          <span class="demonstration"></span>
          <el-date-picker
            v-model="queryInfo.data"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="日期">
          </el-date-picker>
          <el-input
            v-model="queryInfo.cost"
            placeholder="花费小于">
          </el-input>
          <el-button type="primary" @click="query(1,pageSize,queryInfo)">搜索</el-button>
          <el-button type="warning" native-type="reset" @click="rest">重置</el-button>
        </div>

        <!--表格区-->
        <el-table :data="queryList" border stripe>
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column label="场地名" prop="name"></el-table-column>
          <el-table-column label="地点" prop="site"></el-table-column>
          <el-table-column label="日期" prop="data"></el-table-column>
          <el-table-column label="时间" prop="time"></el-table-column>
          <el-table-column label="余量" prop="remain"></el-table-column>
          <el-table-column label="价格" prop="cost"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="primary" round size="mini" @click="order(scope.row.id)">预约</el-button>
              <el-button type="success" round size="mini" @click="open(scope.row)" :disabled="type">教师申请
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--  分页区-->
        <div class="block">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="pageNum"
            :page-size="pageSize"
            layout="total, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
        <!-- 预约区-->
      </el-card>
    </form>

    <!-- 编辑余量-->
    <el-dialog
      title="请输入申请原因" :visible.sync="openEdit" width="30%" :before-close="close">
      <el-input v-model="apply.reason"></el-input>
      <span slot="footer" class="dialog-footer">
    <el-button @click="close">取 消</el-button>
    <el-button type="primary" @click="sendApply">确 定</el-button>
       </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "UserOder",
  destroyed() {
//    this.onClose();
  },
  created() {
    this.type = sessionStorage.getItem("type") === "false"
    this.$http.get("/user/init",).then(res => {
      if (res.data.code === 200) {
        this.init.name = res.data.data.type;
        this.init.time = res.data.data.time;
      } else {
        this.$message.error(res.data.msg)
      }
    }).catch(err => {
      console.log(err);
    })
    this.query(this.pageNum, this.pageSize, this.queryInfo)
    if (!this.type) this.initWebSocket();
  },
  data() {
    return {
      type: false,
      queryInfo: {
        name: null,
        time: null,
        data: null,
        cost: null,
      },
      openEdit: false,

      apply: {
        spaceId: null,
        site: null,
        date: null,
        time: null,
        reason: null,
      },

      init: {
        name: [],
        time: [],
      },


      spaceList: [],
      queryList: [],
      pageNum: 1,
      pageSize: 7,
      total: 0,
    }
  },
  methods: {
    query(pageNum, pageSize, queryInfo) {
      this.$http.get("/user/search", {
        params: {
          pageNum, pageSize, queryInfo
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.queryList = res.data.data.list;
          this.total = res.data.data.total;
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(err => {
        this.$message.error("数据加载失败")
      })
    },
    rest() {
      this.queryInfo.time = null;
      this.queryInfo.data = null;
      this.queryInfo.cost = null;
      this.queryInfo.name = null;
    },
    open(row) {
      this.apply.spaceId = row.id
      this.apply.site = row.site
      this.apply.date = row.data
      this.apply.time = row.time
      this.openEdit = true;
    },
    close() {
      this.openEdit = false;
      this.apply.reason = null;
    },

    initWebSocket() { // 初始化weosocket(必须)
      const account = sessionStorage.getItem("account");
      const wsUri = "ws://localhost:8081/user/" + account;
      this.ws = new WebSocket(wsUri);
      this.ws.onmessage = this.onMessage;
      this.ws.onopen = this.onOpen;
      this.ws.onerror = this.onError;
      this.ws.onclose = this.onClose;
    },
    onOpen() { // websocket连接后发送数据(send发送)

    },
    onError(e) { // 连接建立失败重连
      this.onClose()
    },
    onMessage(msg) { // 数据接收
      let obj = JSON.parse(msg.data);
      if (obj.code === 200) {
        //请求完成
        this.query(1, 7, this.queryInfo)
        this.$message.success(obj.msg)
        this.$emit('show', true)
      } else if (obj.code === 400) {//审核完成
        this.$emit('show', true)
      } else {
        this.$message.error(obj.msg);
      }
    },

    sendApply() {
      this.send(JSON.stringify(this.apply));
      this.openEdit = false;
    },

    send(msg) { // 数据发送
      this.ws.send(msg);
    },
    onClose(e) { // 关闭
      this.ws.close();
    },

    order(id) {
      this.$confirm("确定预约", "预约", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.sendOrder(id);
      }).catch(() => {
        this.$message({
          type: 'warning',
          message: '已取消删除'
        });
      });
    },
    sendOrder(id) {
      this.$http.get("/user/order", {
        params: {
          spaceTimeID: id
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.$message.success("预定成功");
          this.query(this.pageNum, this.pageSize, this.queryInfo)
          return;
        }
        this.$message.error(res.data.msg);
        this.query(this.pageNum, this.pageSize, this.queryInfo);
      }).catch(err => {
        console.log(err);
      })
    },
    handleCurrentChange() {
      this.query(this.pageNum, this.pageSize, this.queryInfo)
    }
  }
}
</script>

<style scoped>
.el-input {
  width: 200px;
  margin: 20px;
}
</style>
